<template>
  <view class="alldiv">
    <!-- 头部搜索地图区域 -->
    <view class="headdiv">
      <map
        style="width: 100%; height: 280px; position: absolute"
        :latitude="latitude"
        :longitude="longitude"
        :markers="covers"
      >
      </map>
      <!-- 第一层搜索和返回 -->
      <view class="topdiv">
        <!-- 这个是返回区域 -->
        <view class="navdiv" @click="navigateBack">
          <u-icon name="arrow-left" size="35" color="rgba(0,0,0,0.9)"></u-icon>
        </view>
        <!-- 搜索区域 -->
        <view class="searchfordiv">
          <u-search
            shape="round"
            :placeholder="internationalization.Unblanking.searchval"
            :showAction="false"
            v-model="searchval"
          ></u-search>
        </view>
      </view>
    </view>
    <!-- 这个是主体区域 -->
    <view class="bodydiv">
      <!-- 第一层电池量和km区域 -->
      <view class="Firstlayerdiv">
        <!-- 标题区域 -->
        <view class="titlediv">
          <!-- 编号区域 -->
          <view
            style="
              font-size: 16px;
              color: rgba(56, 56, 56, 1);
              font-weight: bold;
            "
            >{{ internationalization.Unblanking.bh }} {{vehicle.qrCode}}</view
          >
          <view style="font-size: 12px; color: rgba(153, 153, 153, 1)"
            >{{ internationalization.Unblanking.qbj }}{{areasFee.hourlyRate}}{{
              internationalization.Unblanking.tz
            }}（10{{ internationalization.Unblanking.fz }}）</view
          >
        </view>
        <!-- 电池量和km区域 -->
        <view class="batterydiv">
          <!-- 这个是电池区域 -->
          <view class="batteryd">
            <u-line-progress
              activeColor="rgba(47, 212, 184, 1) "
              inactiveColor="#ffffff"
              :percentage="76"
              height="86"
            >
              <view slot="default">
                <span style="font-size: 10px; color: rgba(56, 56, 56, 1)">{{
                  internationalization.Unblanking.residue
                }}</span>
                <span
                  style="
                    margin-left: 10px;
                    font-size: 36px;
                    font-weight: bold;
                    color: rgba(56, 56, 56, 1);
                  "
                  >{{ vehicle.electricity }}</span
                >
                <span style="font-size: 15px; color: rgba(56, 56, 56, 1)"
                  >%</span
                >
              </view>
            </u-line-progress>
          </view>
          <!-- 这个是公里数 -->
          <view class="kilometersd">
            <span style="font-size: 10px; color: rgba(153, 153, 153, 1)">{{
              internationalization.Unblanking.Ridable
            }}</span>
            <span style="margin-left: 10px; font-size: 36px; font-weight: bold"
              >36</span
            >
            <span style="font-size: 15px; color: rgba(56, 56, 56, 1)">km</span>
          </view>
        </view>
      </view>
      <!-- 第二层计价模式区域 -->
      <view class="secondfloordiv">
        <!-- 子盒子 -->
        <view class="secodiv">
          <!-- 标题区域 -->
          <view class="titledivv">
            <span
              style="
                font-size: 16px;
                font-weight: bold;
                color: rgba(56, 56, 56, 1);
              "
              >{{ internationalization.Unblanking.pricingtitle }}</span
            >
          </view>

          <view class="twodiv">
            <!--              时租-->
            <view class="box">
              <view class="reado">
                <view>
                  <span
                    style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                    >{{ internationalization.Unblanking.readoonetitle }}</span
                  >
                </view>
                <view>
                  <u-radio-group v-model="readoval" iconPlacement="right">
                    <u-radio
                      name="0"
                      activeColor="rgba(47, 212, 184, 1)"
                    ></u-radio>
                  </u-radio-group>
                </view>
              </view>
              <view class="costdiv">
                <span
                  style="
                    font-size: 36px;
                    color: rgba(255, 51, 51, 1);
                    font-weight: bold;
                  "
                  >{{areasFee.hourlyRate}}</span
                >
                <span
                  style="
                    margin-left: 10px;
                    font-size: 10px;
                    color: rgba(153, 153, 153, 1);
                  "
                  >{{ internationalization.Unblanking.readoonetime }}</span
                >
              </view>
            </view>
            <!--              日租-->
            <view class="box">


              <view class="reado">
                <view>
                  <span
                    style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                    >{{ internationalization.Unblanking.readotwotitle }}</span
                  >
                </view>
                <view>
                  <u-radio-group v-model="readoval" iconPlacement="right">
                    <u-radio
                      name="1"
                      activeColor="rgba(47, 212, 184, 1)"
                    ></u-radio>
                  </u-radio-group>
                </view>
              </view>

              <view class="costdiv">
                <span
                  style="
                    font-size: 36px;
                    color: rgba(255, 51, 51, 1);
                    font-weight: bold;
                  "
                  >{{ areasFee.dailyRate }}</span
                >


                <span
                  style="
                    margin-left: 10px;
                    font-size: 10px;
                    color: rgba(153, 153, 153, 1);
                  "
                  >{{ internationalization.Unblanking.readotwotime }}</span
                >
              </view>
            </view>

          </view>
          <view class="twodiv">
            <!--              周租-->
            <view class="box">
              <view class="reado">
                <view>
                  <span
                      style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                  >{{ internationalization.Unblanking.readoonetitle }}</span
                  >
                </view>
                <view>
                  <u-radio-group v-model="readoval" iconPlacement="right">
                    <u-radio
                        name="2"
                        activeColor="rgba(47, 212, 184, 1)"
                    ></u-radio>
                  </u-radio-group>
                </view>
              </view>
              <view class="costdiv">
                <span
                    style="
                    font-size: 36px;
                    color: rgba(255, 51, 51, 1);
                    font-weight: bold;
                  "
                >{{areasFee.weeklyRate}}</span
                >
                <span
                    style="
                    margin-left: 10px;
                    font-size: 10px;
                    color: rgba(153, 153, 153, 1);
                  "
                >{{ internationalization.Unblanking.readoonetime }}</span
                >
              </view>
            </view>
            <!--              月租-->
            <view class="box">


              <view class="reado">
                <view>
                  <span
                      style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                  >{{ internationalization.Unblanking.readotwotitle }}</span
                  >
                </view>
                <view>
                  <u-radio-group v-model="readoval" iconPlacement="right">
                    <u-radio
                        name="3"
                        activeColor="rgba(47, 212, 184, 1)"
                    ></u-radio>
                  </u-radio-group>
                </view>
              </view>

              <view class="costdiv">
                <span
                    style="
                    font-size: 36px;
                    color: rgba(255, 51, 51, 1);
                    font-weight: bold;
                  "
                >{{ areasFee.monthlyRate }}</span
                >


                <span
                    style="
                    margin-left: 10px;
                    font-size: 10px;
                    color: rgba(153, 153, 153, 1);
                  "
                >{{ internationalization.Unblanking.readotwotime }}</span
                >
              </view>
            </view>

          </view>
        </view>
      </view>
      <!-- 第三层按钮区域 -->
      <view class="Thirdlayerdiv">
        <!-- 这个是按钮区域 -->
        <view class="btns">
          <u-button
            type="primary"
            shape="radius"
            color="linear-gradient(90deg,rgba(65, 240, 135, 1) 0%,rgba(47, 212, 184, 1) 100%)"
            size="small"
            @click="startRiding"
            :text="internationalization.Unblanking.btn"
          ></u-button>
        </view>
        <view class="functionlistdiv">
          <view class="aa">
            <image
              style="width: 18px; height: 18px"
              src="../../../static/image/frequently.png"
              mode="scaleToFill"
            />
            <span style="margin-left: 10px">{{
              internationalization.Unblanking.funone
            }}</span>
          </view>
          <view class="aa">
            <image
              style="width: 18px; height: 18px"
              src="../../../static/image/tool.png"
              mode="scaleToFill"
            />
            <span style="margin-left: 10px">{{
              internationalization.Unblanking.funtwo
            }}</span>
          </view>
          <view class="aa">
            <image
              style="width: 18px; height: 18px"
              src="../../../static/image/opinion.png"
              mode="scaleToFill"
            />
            <span style="margin-left: 10px">{{
              internationalization.Unblanking.funthree
            }}</span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

//getVehicleList
import { getVehicleList } from "../../../http/vehicle/vehicle";

//ride_records
import { ride_records ,areasFee } from "../../../http/ride/ride";
import {isMember} from "../../../http/user/user";
export default {
  data() {
    return {
      latitude: 39.909,
			longitude: 116.39742,
      isMember: false,
      result: '',
      internationalization: {},
      // 搜索
      searchval: "",
      current: 0,
      readoval: "0",
      vehicle:{

      },
      GoRideRecords:{
        userId:'',
      },
      //方案费用
      areasFee:{}
    };
  },
  onShow: function () {
    this.getlanguagedata();
    console.log("Personalcenter Show");
  },
  onLoad(options) {
    this.getlanguagedata();
    // 页面加载时获取传递的参数
    if (options.result) {
      this.result = options.result;
      // 可以在这里进行其他的逻辑处理，比如使用result值进行API调用等
      //调用getVehicleInfo
      this.getVehicleInfo(this.result)
    }
  },
  mounted() {
    this.getlanguagedata();
  },
  methods: {
    //isMember
    getIsMember() {
      isMember().then((res) => {
        console.log(res);
      });
    },

    //根据区域获取费用
    getAreasFee(){
      console.log(this.vehicle.areaId)
      areasFee(this.vehicle.areaId).then((res) => {
        console.log(res);

        this.areasFee=res.rows[0]

      });
    },
    //开始骑行userid 从vuex中获取
    startRiding() {
      //调用ride_records
      this.GoRideRecords.userId=this.$store.state.user.information.userId
      console.log(this.$store.state.user)
      console.log(this.GoRideRecords)
      this.GoRideRecords.vehicleId = this.result
      ride_records(this.GoRideRecords).then((res) => {
        if (res.code==200){
          this.Mygounblanking()

        }else if ( res.msg =="您有未结束的骑行记录"){

          //跳转到骑行页面
          this.Mygounblanking()
        }

      });
    },
    //获取到当前车辆信息
    getVehicleInfo(code){
      getVehicleList(code).then(res=>{
            console.log(res)
        this.vehicle=  res.rows[0]
        //获取车辆以后根据车辆信息获取区域费用方案
            this.getAreasFee()
          }

      )
    },
    getlanguagedata() {
      this.internationalization =
        this.$store.getters["internationalization/getinternationalization"];
    },
    // 返回上一个页面
    navigateBack() {
      uni.navigateBack({
        delta: 1,
        success: () => {
          // 返回成功后的回调函数
        },
        fail: () => {
          // 返回失败后的回调函数
        },
      });
    },
    // 确认开锁
    Mygounblanking() {

      uni.navigateTo({
        url: "/pages/Home/Scancode/Driving",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.alldiv {
  width: 100%;
  height: 100vh;
  // 这个是头部样式
  .headdiv {
    width: 100%;
    height: 40%;
    overflow: hidden;
    // 这个是搜索和返回样式
    .topdiv {
      width: 100%;
      height: 20%;
      display: flex;
      margin-bottom: 10px;
      position: relative;
      top: 0px;
      // 这个是返回样式
      .navdiv {
        width: 15%;
        height: 100%;
        display: flex;
        justify-content: center;
        overflow: hidden;
      }
      // 这个是搜索样式
      .searchfordiv {
        width: 85%;
        height: 100%;
        display: flex;
      }
    }
  }
  //   这个是主体区域样式
  .bodydiv {
    width: 100%;
    height: 60%;
    position: relative;
    border-radius: 20px 20px 0px 0px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -3px 6px rgba(6, 145, 161, 0.05);
    // 第一层电池量和km区域样式
    .Firstlayerdiv {
      width: 100%;
      height: 40%;
      display: flex;
      flex-direction: column;
      align-items: center;
      //   标题区域样式
      .titlediv {
        width: 95%;
        height: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      //   电池量和km区域样式
      .batterydiv {
        width: 95%;
        height: 60%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        // 这个是电池样式
        .batteryd {
          width: 48%;
          height: 95%;
          background-color: #ffffff;
          border-radius: 16px;
          border: 1px solid rgba(47, 212, 184, 1);
          display: flex;
          align-items: center;
        }
        // 公里数样式
        .kilometersd {
          width: 48%;
          height: 95%;
          background-color: #ffffff;
          border-radius: 16px;
          box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    // 第二层计价模式区域 样式
    .secondfloordiv {
      width: 100%;
      height: 40%;
      display: flex;
      justify-content: center;
      align-items: center;
      //   子盒子样式
      .secodiv {
        width: 95%;
        height: 95%;
        left: 16px;
        border-radius: 16px;
        background: linear-gradient(
          135deg,
          rgba(47, 212, 183, 0.17) 0%,
          rgba(64, 239, 136, 0.07) 100%
        );
        display: flex;
        flex-direction: column;
        align-items: center;
        // 标题区域样式
        .titledivv {
          width: 95%;
          height: 25%;
          display: flex;
          align-items: center;
        }
        // 第二层样式
        .twodiv {
          width: 95%;
          height: 75%;
          display: flex;
          left: 26px;
          border-radius: 16px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);

          .box {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            .reado {
              width: 95%;
              height: 35%;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            // 价格区域
            .costdiv {
              width: 95%;
              height: 65%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          .box::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            height: 90px;
            width: 1px; /* 竖线宽度 */
            background-color: rgba(217, 219, 218, 1); /* 竖线颜色 */
          }
        }
      }
    }
    // 第二层按钮区域样式
    .Thirdlayerdiv {
      width: 100%;
      height: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      //   按钮样式
      .btns {
        width: 95%;
        height: 50%;
        display: flex;
        align-items: center;
      }
      //   功能列表区域
      .functionlistdiv {
        width: 95%;
        height: 50%;
        display: flex;
        .aa {
          width: 33.33%;
          height: 100%;
          font-size: 12px;
          color: rgba(153, 153, 153, 1);
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

/deep/ .u-line-progress__line {
  width: 142.548px !important;
  height: 76px !important;
  opacity: 1 !important;
  border-radius: 15px !important;
  background: linear-gradient(
    270deg,
    rgba(47, 212, 184, 1) 0%,
    rgba(47, 212, 184, 0) 100%
  ) !important;
}

/deep/ .u-button {
  color: #fff;
  background-color: #3c9cff;
  border-color: #3c9cff;
  border-width: 1px;
  width: 88% !important;
  border-style: solid;
  border-radius: 30px;
  box-shadow: 0px 2px 10px rgba(6, 145, 161, 0.25);
}
</style>
